<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var __data__;
$(document).ready(function(){

	$("#excels").change(function() {
		var excelIndex = $(this).children("option:selected").val();
		var struct = __data__[excelIndex];
		$("#sheets").empty();
		for (var i = 0; i < struct.sheets.length; i++) {
			$("#sheets").append("<option value='__val__'>__name__</option>".replace(/__val__/g, i).replace(/__name__/g, struct.sheets[i].name));
		}
		$("#sheets").change();
	});
	$("#sheets").change(function() {
		$("#fields").empty();
		var excelIndex = $("#excels").children("option:selected").val();
		var sheetIndex = $(this).children("option:selected").val();
		var fields = __data__[excelIndex].sheets[sheetIndex].fields;
		for (var i = 0; i < fields.length; i++) {
			$("#fields").append("<input type='checkbox' name='field' value='__val__' />__name__<br/>".replace(/__val__/g, i).replace(/__name__/g, fields[i].name + "(" + fields[i].desc + ")"));
		}
	});
	$("#btnOk").click(function() {
		var excelIndex = $("#excels").children("option:selected").val();
		var sheetIndex = $("#sheets").children("option:selected").val();
		var fields = [];
		$('input:checkbox[name=field]:checked').each(function() {
			var i = $(this).val();
			var fieldName = __data__[excelIndex].sheets[sheetIndex].fields[i].name;
			fields.push(fieldName);
		});
		fields = fields.join(",");
		//String xls, String sheet, String fields, Integer pretty
		var xls = __data__[excelIndex].name;
		var sheet = __data__[excelIndex].sheets[sheetIndex].name;
		$.ajax({
			url: "/tools/xls2json",
			dataType: "text",
			data: { xls: xls, sheet: sheet, fields: fields, pretty: 1 },
			success: function(data) {
				$("#result").val(data);
			},
			error: function(err) {
				alert(JSON.stringify(err));
			}
		});
	});

	$.ajax({
	  url: "/tools/xlsstruct",
	  dataType: "json",
	  success: function(data) {
	    __data__ = data;
	    $("#excels").empty();
		$("#sheets").empty();
		$("#fields").empty();
	    for (var i = 0; i < data.length; i++) {
		  var struct = data[i];
		  $("#excels").append("<option value='__val__'>__name__</option>".replace(/__val__/g, i).replace(/__name__/g, struct.name));
		}
		$("#excels").change();
		$("#sheets").change();
	  },
	});
});
</script>
</head>
<body>
	<h1>Excel To JSON</h1>
	<br/>
	<table border="1">
		<tr><td>Please select excel:</td></tr>
		<tr>
			<td>
			<select id="excels">
				<option>Please waiting</option>
			</select>
			</td>
		</tr>
		<tr><td>Please select sheet:</td></tr>
		<tr>
			<td>
			<select id="sheets">
				<option>Please waiting</option>
			</select>
			</td>
		</tr>
		<tr><td>Please select fields:</td></tr>
		<tr>
			<td id="fields">
				<input type="checkbox" name="field" />Please waiting
			</td>
		</tr>
		<tr><td><button id="btnOk">SUBMIT</button></td></tr>
	</table>
	<br/>
	<table border="1">
		<tr><td>The result:</td></tr>
		<tr><td><textarea rows="20" cols="100" id="result"></textarea></td></tr>
	</table>
	
</body>
</html>